﻿@model Silvia.Models.Home.IndexModel
@{
    ViewBag.Title = "夕薇雅化妆工作室 - 首页";
    ViewBag.Keywords = "";
}
<script type="text/javascript">
    DD_belatedPNG.fix('body,.logo, .home_nav_top,.home_nav_middle,.home_nav_bottom');
</script>
<script type="text/javascript">

    var img_src_width = 0, img_src_height = 0, overlay_width = 0, overlay_height = 0, img_width = 0, img_height = 0;

    $(document).ready(function () {

        init();

        $(window).resize(function () {

            if (img_src_height == 0 || img_src_width == 0)
                return;

            resetImg(true);
        });

        changeBgImg();
        autoChangeBgImg();
    });

    var imgs = new Array();
    var current_index = 0;

    function init() {
        $('img', '.home_background_img_list').each(function () {
            imgs.push($(this).attr('src'));
        });
    }

    function autoChangeBgImg() {
        setInterval(function () {
            changeBgImg();
        }, 10000);
    }

    function changeBgImg() {
        if (imgs.length == current_index) {
            current_index = 0;
        }

        $(".home_background_overlay").hide();
        $('.home_background_img').stop(true, false).animate({ left: -$('.home_background_img').width(), opacity: 0 }, 200, function () {
            $('.home_background_img').width('auto');
            $('.home_background_img').height('auto');
            $('.home_background_img').attr('src', imgs[current_index]);
            $(".home_background_img").imagesLoaded(function () {

                img_src_width = $(".home_background_img").width();
                img_src_height = $(".home_background_img").height();

                resetImg();
            });
            current_index++;
        });
    }

    function resetImg() {

        overlay_width = $(".home_background_contain").width();
        overlay_height = $(".home_background_contain").height();

        var img_scale = 0;
        var is_width_greater = false;

        if (img_src_width > img_src_height) {
            img_scale = img_src_width / img_src_height;
            is_width_greater = true;
        }
        else
            img_scale = img_src_height / img_src_width;


        if (img_src_height > overlay_height) {
            img_height = overlay_height;

            if (is_width_greater)
                img_width = img_height * img_scale;
            else
                img_width = img_height / img_scale;
        }

        if (img_width > overlay_width) {
            img_width = overlay_width;

            if (is_width_greater)
                img_height = img_width / img_scale;
            else
                img_height = img_width * img_scale;
        }

        var position_left = (overlay_width - img_width) / 2;

        $(".home_background_overlay").hide();
        $(".home_background_img").stop(true, false).animate({ width: img_width, height: img_height, left: position_left, opacity: 1 }, 300, function () {

            $(".home_background_overlay").css({ width: img_width, height: img_height, left: position_left });
            $(".home_background_overlay").show();

            var f_overlay_height = $(".home_background_contain").height();
            var f_img_height = $(".home_background_img").height();

            if (f_overlay_height != f_img_height)
                resetImg();
        });
    }

    
</script>
<ul class="home_background_img_list">
    @foreach (var image in Model.ImageList)
    { 
        <li>
            <img src="@image.ImageLink" alt=""/></li>
    }
</ul>
<div class="logo">
    <img src="../../Content/imgs/logo.png" />
</div>
<div class="home_contact">
    <div class="home_contact_title">
        联系我们 Contact</div>
    <div style="clear: both;">
    </div>
    <div class="home_contact_content">
        @Html.Raw(Model.Contact)
    </div>
</div>
